import { ElTreeSelect } from 'element-plus';
import { defineComponent, PropType, computed, watch, reactive, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo'
import { systemApi } from '/@/api/sys/system-api'
import './prefix-label-tree-select.css';
const { userInfos } = storeToRefs(useUserInfo())
const PrefixLabelSelect = defineComponent({
  props: {
    ...ElTreeSelect.props,
    prefixTitle: {
      type: String as PropType<string>,
      default: () => '',
    },
  },
  emits: ['update:modelValue'],
  setup(props, { emit}) {
    const computedModelValue = computed({
      get: () => props.value,
      set: (val) => emit('update:modelValue', val.id),
    });
    return () => (
      <div class="prefix-label-select-container">
        {props.prefixTitle && <div class="prefix-title ">{props.prefixTitle}</div>}
        <ElTreeSelect
          class="prefix-label-select"
          v-model={computedModelValue.value}
          node-key="id"
          value-key="id"
          {...props}
        />
      </div>
    );
  },
});

export default PrefixLabelSelect;
